<template>
  <div class="tongzhi">
    <head_><h1>订单详情</h1></head_>
    <div class="dingdanhao">
      <p>
        订单号：<span style="color: blue">{{ order.orderNo }}</span
        >已完成
      </p>
      <p style="padding-left: 10px; font-size: 16px; font-weight: bold">请及时到<span style="color: blue">&nbsp;&nbsp;{{ this.$store.state.shopname}} &nbsp;&nbsp;</span>取车</p>
      <div style="font-size: 13px; color: 999; padding: 10px">
        租车时间： {{ order.startTime }} - {{ order.endTime }}
      </div>
    </div>
    <div class="weizhidianhua">
      <div>
        <p>
          <van-icon size=".33rem" name="location" />
          <span>{{ address.province }} </span>
          <span>{{ address.city }} </span>
          <span>{{ address.area }} </span>
          <span>{{ address.address }} </span>
        </p>
        <p>
          <van-icon size=".33rem" name="phone" />
          <span>0371-13765477413</span>
        </p>
      </div>
      <div><van-button round type="info">立即发送</van-button></div>
    </div>
    <van-button class="botom_toshouye" type="info" @click="toshouye">
      返回首页
    </van-button>
  </div>
</template>

<script>
import head_ from "../header";
export default {
  props: {},
  data() {
    return {
      order: this.$store.state.order,
      address: this.$store.state.address
    };
  },
  methods: {
    toshouye() {
      //待更换首页路由路径
      this.$router.push("/home");
      this.$store.state.brrowShop = "" ;
      this.$store.state.startime = "";
    },
  },
  components: {
    head_,
  },
};
</script>

<style scoped lang="less">
.tongzhi {
  width: 100%;
  height: 12.5rem;
  background: #eee;
  .dingdanhao {
    width: 95%;
    height: 2.05rem;
    margin: 0.2rem auto 0.16rem auto;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0.1rem 0;
    p {
      flex: 1;
    }
    p:first-child {
      font-size: 0.34rem;
      font-weight: 600;
      display: flex;
      align-items: flex-end;
      padding-bottom: 0.2rem;
      padding-left: 0.14rem;
      span {
        font-size: 0.28rem;
        color: #666666;
      }
    }
    p:last-child {
      font-size: 0.29rem;
      color: #666666;
      font-weight: 600;
      padding-left: 1.54rem;
      display: flex;
      align-items: flex-start;
    }
  }
  .weizhidianhua {
    width: 95%;
    height: 3.39rem;
    background: white;
    margin: 0 auto;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    div:first-child {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 0.2rem 0 0 0.42rem;
      p {
        display: flex;
        font-size: 0.28rem;
        color: #666666;
        font-weight: 600;
      }
    }
    div:last-child {
      flex: 2;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      button {
        width: 2.01rem;
        height: 0.6rem;
        padding: 0;
        margin-right: 0.24rem;
        div {
          justify-content: center;
          width: 2.01rem;
          span {
            width: 100%;
            font-size: 0.28rem;
            font-weight: 600;
          }
        }
      }
    }
  }
  .botom_toshouye {
    width: 100%;
    height: 0.81rem;
    font-size: 0.29rem;
    font-weight: 600;
    position: absolute;
    bottom: 0;
  }
}
</style>
